<template>
    <div :id="id">
    </div>
</template>
<script>
import eChartOption from '@/option/echartsOption/lineOption/index';
import utils from '@/utils/throttleAndDebounce/index';

export default {
    name: 'largeChart',
    created() {
        this.option = eChartOption.setOption(this.axisData.xData, this.axisData.yData, this.axisName.xName, this.axisName.yName, this.title);
    },
    data() {
        return {
            option: ''
        };
    },
    props: {
        id: { type: String, require: true },
        title: {
            type: String,
            default: () => {
                return '';
            }
        },
        axisData: {
            type: Object,
            default: () => {
                return { xData: [], yData: [] };
            }
        },
        axisName: {
            type: Object,
            default: () => {
                return { xName: '', yName: '' };
            }
        }
    },
    methods: {
        initEcharts() {
            let myEcharts = '';
            return () => {
                let dom = document.querySelector('#' + this.id);
                if (myEcharts != null && myEcharts !== '') {
                    myEcharts.dispose();
                }
                if (dom) {
                    myEcharts = this.$echarts.init(dom);
                    myEcharts.setOption(this.option);
                }
                return myEcharts;
            };
        },
        DomResize() {
            setTimeout(() => {
                let myEcharts = this.initEcharts();
                // console.log(myEcharts);
                let dom = document.querySelector('#' + this.id);
                if (dom) {
                    //监听dom的大小变化
                    const resizeObserver = new ResizeObserver(utils.throttle(entries => {
                        myEcharts().resize();
                        console.log(entries);
                    }, 500));
                    resizeObserver.observe(dom);
                }

            });
        }
    },
    mounted() {
        setTimeout(this.DomResize, 10);
    }
};
</script>
<style scoped>
div {
    width: 100%;
    height: 100%;
}
</style>
